@extends('seller::layout.master')

@section('title', __('seller::user.user'))

@section('content')
  <div id="users-app" class="card">
    <div class="card-body h-min-600">
      <div class="d-flex justify-content-between mb-4">
        <a class="btn btn-primary" href="{{ seller_route('users.create') }}">{{ __('seller::user.user_create') }}</a>
      </div>
      <div class="table-push">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>{{ __('common.name') }}</th>
              <th>{{ __('common.email') }}</th>
              <th>{{ __('common.created_at') }}</th>
              <th>{{ __('common.updated_at') }}</th>
              <th class="text-end">{{ __('common.action') }}</th>
            </tr>
          </thead>
          <tbody>
          @foreach($users as $index => $user)
            <tr>
              <td>{{ $user['id'] }}</td>
              <td>{{ $user['name'] }}</td>
              <td>{{ $user['email'] }}</td>
              <td>{{ $user['created_at'] }}</td>
              <td>{{ $user['updated_at'] }}</td>
              <td class="text-end">
                <a class="btn btn-outline-secondary btn-sm" href="{{ seller_route('users.edit', $user['id']) }}">{{ __('common.edit') }}</a>
                <button class="btn btn-outline-danger btn-sm delete-btn" type='button' data-id="{{ $user['id'] }}">{{ __('common.delete') }}</button>
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>

    </div>
  </div>
@endsection

@push('footer')
  <script>
    $('.delete-btn').click(function(event) {
      const id = $(this).data('id');
      const self = $(this);

      layer.confirm('{{ __('common.confirm_delete') }}', {
        title: "{{ __('common.text_hint') }}",
        btn: ['{{ __('common.cancel') }}', '{{ __('common.confirm') }}'],
        area: ['400px'],
        btn2: () => {
          $http.delete(`users/${id}`).then((res) => {
            layer.msg(res.message);
            window.location.reload();
          })
        }
      })
    });
  </script>
@endpush
